<!-- 详情 -->
<template>
	<view>
		<div class="container">
		        <div class="line">
		            <span class="text">运单号：</span>
		            <span class="text">{{items.articleNumber}}</span>
		        </div>
		        <div class="line">
		            <span class="text">到站：</span>
		            <span class="text" v-if="items.destinationStation!=null">{{items.destinationStation}}</span>
		        </div>
		        <div class="line">
		            <span class="text">总费用：</span>
		            <span class="text">{{items.sanbaoCost}}</span>
		        </div>
				<div class="line">
				    <span class="text">货件信息：</span>
				    <span class="text" v-if="items.description!=undefined">{{items.description}}</span>
					<span class="text" v-if="item.number!=undefined">{{item.number}}件</span>
					<span class="text" v-if="item.weight!=undefined">{{items.weight}}kg{{items.volume}}m³</span>
				</div>
				<div class="line">
				    <span class="text">包装内容：</span>
				    <span class="text"  v-if="items.installContent!=null">{{items.installContent}}</span>
				</div>
				<div class="line">
				    <span class="text">开单备注：</span>
				    <span class="text" v-if="items.sendRemark!=null">{{items.sendRemark}}</span>
				</div>
				<div class="line">
				    <span class="text">配送方式：</span>
				    <span class="text"  v-if="items.receiving!=null">{{items.receiving}}</span>
				</div>
				<div class="line">
				    <span class="text">预约日期：</span>
				    <span class="text" v-if="items.predictTime!=undefined">{{formatDate(items.predictTime)}}</span>
				</div>
				<div class="line">
				    <span class="text">预约内容：</span>
				    <span class="text"  v-if="items.predictContent!=null">{{items.predictContent}}</span>
				</div>
				<div class="line">
				    <span class="text">派单人：</span>
				    <span class="text" v-if="items.sender!=null">{{items.sender}}</span>
				</div>
				<div class="line">
				    <span class="text">收货人：</span>
				    <span class="text" v-if="items.putUserName!=null">{{items.putUserName}}</span>
				</div>
				<div class="line">
				    <span class="text">送货地址：</span>
				    <span class="text" v-if="items.consigneeDetailedAddress!=null">{{items.consigneeDetailedAddress}}</span>
				</div>
				<div class="line">
				    <span class="text">提货电话：</span>
				    <span class="text"  v-if="items.masterPorterContact!=null">{{items.masterPorterContact}}</span>
				</div>
				<div class="line">
				    <span class="text">提货地址：</span>
				    <span class="text"  v-if="items.masterPorterAddress!=null">{{items.masterPorterAddress}}</span>
				</div>
				<div class="line">
				    <span class="text">派单备注：</span>
				    <span class="text"  v-if="items.articleNumber!=null">{{items.articleNumber}}</span>
				</div>
				<div class="line">
				    <span class="text">厂家信息：</span>
				    <span class="text"  v-if="items.sendUserName!=null">{{items.sendUserName}}</span>
				</div>
				<div class="line">
				    <span class="text">派单日期：</span>
				    <span class="text"  v-if="items.paidanTime!=null">{{ formatDate(items.paidanTime) }}</span>
				</div>
				<div class="pictureUrl">
				    <span>签收图片：</span>
			<!-- 	    <span class="text"  v-if="items.file!=null">{{items.file}}</span> -->
					<div class="picture">
						<img v-for="(url, index) in imageUrls" :key="index" :src="url" alt="Image from database" style="width: 100px;height: 100px;margin-left: 5px;" @click="previewImage(index)"/>
						</div>
				</div>
		    </div>
	</view>
</template>

<script>
	import {getDetails} from '@/api/appointment.js';
	export default {
		data() {
			return {
				phone:'',
				businessId:'',
				items:{},
				imageUrls:[]
			}
		},
		onLoad(options) {
				this.businessId=options.id
				console.log(options.id)
				this.items.waybillNumber=options.waybillNumber
			},
		mounted(){
			getDetails({businessId: this.businessId}).then(res =>{
				this.items=res.data.data
				this.imageUrls=res.data.data.fileList
			}).catch((error) => {
				if (error.response) {
				        // 检查响应状态码
				        if (error.response.status === 500) {
				            // 500内部服务器错误处理
				            console.error('后端500错误:', error.response.data);
				            uni.showToast({
				                title: '服务器内部错误，请稍后再试',
				                icon: 'none',
				                duration: 2000 // 可以根据需要调整显示时间
				            });
				        } else {
				            // 其他HTTP状态码错误处理
				            console.error('其他HTTP错误:', error.response.status, error.response.data);
				            // 根据需要添加其他错误提示逻辑
				        }
						setTimeout(() => {
						                    uni.navigateBack();
						                }, 1000);
				    } else if (error.request) {
				        // 请求已经发出，但没有收到响应的处理
				        console.error('请求已发出，但未收到响应:', error.request);
				        uni.showToast({
				            title: '请求失败，请检查网络连接或稍后重试',
				            icon: 'none',
				            duration: 2000
				        });
						setTimeout(() => {
						                    uni.navigateBack();
						                }, 1000);
				    } else {
				        // 设置请求时发生的错误处理（如请求超时等）
				        console.error('请求配置错误:', error.message);
				        uni.showToast({
				            title: '请求出错，请稍后再试',
				            icon: 'none',
				            duration: 2000
				        });
						setTimeout(() => {
						                    uni.navigateBack();
						                }, 1000);
				    }
			});
			// this.fetchImagesFromDatabase();
		},
		methods: {
			previewImage(index) {
			      uni.previewImage({
			        current: index, // 当前显示图片的索引
			        urls: this.imageUrls // 需要预览的图片链接列表
			      });
			    },
			formatDate(dateStr) {
			    const date = new Date(dateStr);
			    // 提取年、月、日、小时、分钟和秒
			    const year = date.getFullYear();
			    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1，并且用padStart来确保始终是两位数
			    const day = String(date.getDate()).padStart(2, '0'); // 同上，用padStart来确保始终是两位数
			    const hours = String(date.getHours()).padStart(2, '0');
			    const minutes = String(date.getMinutes()).padStart(2, '0');
			    const seconds = String(date.getSeconds()).padStart(2, '0');
			    
			    // 返回格式化后的日期字符串
			    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			  },
			fetchImagesFromDatabase() {
			  try {
			    // 假设data.images包含了图片的路径或URL数组
			    //this.imageUrls = this.items.fileList; // 将图片URL数组保存到组件的state中
			  } catch (error) {
			    console.error('Failed to fetch images from database:', error);
			  }
			}
		}
	}
</script>

<style>
.container {
            display: flex;
            flex-direction: column;
            gap: 10px; /* 行间距，可以根据需要调整 */
			margin-top: 5px;
			margin-left: 15px;
			margin-right: 15px;
        }
        .line {
            display: flex;
            justify-content: space-between;
            padding: 0 5px; /* 左右边距5px */
            border-bottom: 1px solid #dadada; /* 下划线 */
			line-height: 35px;
        }
		.pictureUrl{
			display:inline-block;
			line-height: 20px;
		}
		.picture{
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			line-height: 20px;
		}
        .text {
            margin: 0; /* 移除默认的margin */
        }
</style>
